<template>
  <div>
   <div class="node" v-has="{action: 'agent:menu:list', effect: 'move'}">
      <Panel title="功能菜单管理" :intro="intro">
        <div slot='ext' :class="$style.examine">
          <el-button class="button-offt" type="default" icon="el-icon-refresh" @click="queryData">刷新</el-button>
          <el-button class="button-offt" v-has="{action: 'agent:menu:add', effect: 'move'}" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
          
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
      <template slot="operation" slot-scope="operation">
            <el-button size="mini" icon="el-icon-edit"
              v-has="{action: 'agent:menu:update', effect: 'move'}"
              @click="()=>editStore(operation.row)"
            >编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete"
              v-has="{action: 'agent:menu:delete', effect: 'move'}"
              @click="()=>remove(operation.row.menuId)"
            >删除</el-button>
          </template>
          
      </TableEncapsulation>
      </Panel>
      <ModalPanel 
      :visible='visible'
      title="编辑"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>
          <div slot="parentSelect">
            <el-cascader
            v-model="parentId"
            :options="menuChoose"
            :props="{ checkStrictly: true, value: 'menuId', label: 'name' }"
            clearable>
            </el-cascader>
          </div>
        </ModifyForm>
      </div>
      </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'agent:menu:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/treeTable";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { arrayToTree, menuToTree } from "@/tools/array";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "agenMenu",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
     ModifyForm,
    ModalPanel
  },
  data() {
    return {
      intro:{
        title: '',
        content: `功能说明：代理平台菜单列表，代理平台网址：https://agent.ztkuaichong.com/login。登录账号在“用户管理”中角色为“代理角色”的账号`
      },
      visible:false,
      menuChoose:[],
      parentId: 0,
      modalData:{},
      tableData: [],
      query: {
        page: 1
      },
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      state: '',
      name: '',
       editColumn: [
        {
          name: "标题",
          prop: "name",
          type: "text",
          required: true,
          width: 24
        },
        
        {
          name: "地址",
          prop: "url",
          type: "text",
          required: false,
          width: 24
        },
        {
          name: "菜单类型",
          prop: "type",
          type: "select",
          optionList: [
            {name:'目录',value:0},
            {name:'菜单',value:1},
            {name:'功能',value:2}
          ], // 渲染选择列表的数组
          required: true,
          width: 24
        },
        
         {
          name: "排序",
          prop: "orderNum",
          type: "number",
          required: false,
          width: 24
        },
        {
          name: "是否显示",
          prop: "view",
          type: "select",
          optionList: [
            {name:'是',value:1},
            {name:'否',value:0},
          ], // 渲染选择列表的数组
          required: true,
          width: 24
        },
        {
          name: "授权",
          prop: "perms",
          type: "text",
          required: false,
          width: 24
        },
        {
          name: "父级",
          prop: "parentId",
          type: "other",
          slotName: "parentSelect",
          width: 24
        },
      ],
    };
  },
  created() {
    this.queryData();
  },
  computed: {
    tableConfig: {
        selection: true,
        columnConfig: [
          {
            type: "expand",
            prop: "menuId",
            label: "ID",
            align: "center",
          },
          {
            type: "text",
            prop: "name",
            label: "菜单名称",
            align: "center",
          },
          {
            type: "text",
            prop: "orderNum",
            label: "排序",
            align: "center",
          },
          {
            type: "operation",
            align: "center",
            width: "80px",
            label: "操作"
          }
        ]
      },
  },
  methods: {
    async queryData() {
       let res = await request({
        url: "/agent/menu/list",
        method: "GET",
        data: {}
      })
      this.menuChoose = menuToTree(res.list)
      this.tableData = arrayToTree(res.list)
    },
    async queryBaseFunc(type, props = {}, url = "") {
      if (type === "update")
        this.$store.dispatch({
          type: "base/getLayoutData",
          jobId: this.$store.getters.jobId
        });
    },
    async updateData(values) {
      let parentId
      if(!this.parentId) {
        parentId = 0
      }else{
        let count = this.parentId.length - 1
         parentId = this.parentId[count]
         if(!parentId){
           parentId = this.parentId
         }
      }
      // return
      const { menuId, name, url, type, orderNum, perms, view } = values
      if (type == 1 && !url) return this.$message.error('请输入url地址')
      let postUrl, msg
      if (values.menuId){
        postUrl = '/agent/menu/update'
        msg = '编辑成功'
      }else {
        postUrl = '/agent/menu/add'
        msg = '添加成功'
      }
      let res = await request({
        url: postUrl,
        method: "POST",
        data: { menuId, name, url, type, orderNum, perms, parentId, view },
      })
      // await this.$store.dispatch({
      //         type: 'sysSetting/create',
      //         values: { menuId, name, url, type, orderNum, perms, parentId, view },
      //         url: postUrl
      // });
          this.queryData()
          this.onCancel();
    },
    
    changeSearch(key, val) {
      this[key] = val;
      this.query.page = 1;
    },
    editStore(rowData){
      this.modalData = {...rowData}
      if(rowData){
           this.parentId = rowData.parentId
      }
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    commentDetail(id){
      this.$router.push({ path: "/grate/group/time",query:{id:id,type: "toview"} })
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        const del = await request({
        url: "/agent/menu/delete/"+id,
        method: "POST",
      });
        if(del.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.queryData()
      })
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>